<template>
    <div class="fx-field">
        <div class="sep-line">
            <div class="sep-label" style="color: rgb(255, 255, 255);background-color: rgb(13, 179, 166);">
                <span style="font-size: 14px;">{{ label }}</span>
            </div>
            <div class="sep-right">
                <div class="right-triangle" style="background-color: rgb(13, 179, 166);"></div>
                <div class="right-line" style="border-color: rgb(13, 179, 166);"></div>
                <div class="right-parallelogram1" style="background-color: rgb(13, 179, 166);"></div>
                <div class="right-parallelogram2" style="background-color: rgb(13, 179, 166);"></div>
                <div class="right-parallelogram3" style="background-color: rgb(13, 179, 166);"></div>
            </div>
        </div>
    </div>
</template>
  
  <script>
  export default {
    name: 'MyDivider',
    props: {
      label: {
        type: String,
        required: true
      }
    }
  };
  </script>
  <style>
  .fx-field{
        padding: 7px 0 12px;
        position: relative;
    }
    .sep-line{
        height:28px;
        display:flex;
        position: relative;
    }
    .sep-label{
        line-height:28px;
        padding:0 10px;
    }
    .sep-right{
        flex:auto;
        position: relative;
    }
    .right-triangle{
        height: 100%;
        width: 15px;
        transform: skew(27deg) translateX(-50%);
    }
    .right-line{
        border: 3px solid;
        bottom: 0;
        height: 0;
        left: 0;
        position: absolute;
        right: 0;
    }
    .right-parallelogram1{
        height: 22px;
        left: 15px;
        opacity: .9;
        position: absolute;
        top: 0;
        transform: skew(26deg) translateX(-50%);
        width: 8px;
    }
    .right-parallelogram2{
        height: 22px;
        left: 27px;
        opacity: .6;
        position: absolute;
        top: 0;
        -webkit-transform: skew(26deg) translateX(-50%);
        transform: skew(26deg) translateX(-50%);
        width: 8px;
    }
    .right-parallelogram3{
        height: 22px;
        left: 39px;
        opacity: .3;
        position: absolute;
        top: 0;
        -webkit-transform: skew(26deg) translateX(-50%);
        transform: skew(26deg) translateX(-50%);
        width: 8px;
    }
</style>